<template>
  <div class="yy-knowledgebase-retrieval">
    <!--列表-->
    <div class="yy-store-list-list" v-show="type=='list'">
      <Card>
        <p slot="title">
          <Icon type="md-list" />
          知识库检索列表
        </p>
        <Form ref="formInline" :model="formSearch"  inline>
          <FormItem prop="user">
            <Select class="select" v-model="formSearch.dsNum" placeholder="分类">
              <Option value="">请选择</Option>
							<Option v-for="(item,index) in knowledgeClassification" :value="item.dsNum" :key="index">
                {{item.dsName}}
              </Option>
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Input type="text" v-model="formSearch.searchContent" placeholder="可用空格分隔多关键字进行搜索"></Input>
          </FormItem>
           <FormItem prop="user">
            <CheckboxGroup v-model="formSearch.searchItems">
              <Checkbox label="标题" ></Checkbox>
              <Checkbox label="摘要" ></Checkbox>
              <Checkbox label="关键词" ></Checkbox>
              <Checkbox label="内容" ></Checkbox>
            </CheckboxGroup>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch()">查询</Button>
          </FormItem>
        </Form>
        <Table :columns="columns" :data="data" ></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
          </div>
        </div>
      </Card>
    </div>
    <!--详情-->
    <div class="yy-store-list-details" v-show="type=='details'">
       <Card>
        <p slot="title">
          <Icon type="md-paper"/>
          查看详情
        </p>
        <p slot="extra">
          <Button type="primary" @click="goBack()">返回</Button>
        </p>
        <div class="details" :data="detailsList">
          <p class="details-title"><span>知识标题:</span>{{currentData.f_KnowleTitle}}</p>
          <p class="details-title"><span>摘要:</span>{{currentData.f_KnowleDigest}}</p>
          <p class="details-title"><span>关键词:</span>{{currentData.f_KnowleKeyword}}</p>
          <p class="details-title"><span>分类:</span>{{currentData.dsName}}</p>
          <p class="details-title"><span>知识内容:</span></p>
          <Card  class="contract-upload-list-content">{{currentData.f_KnowleContent}}</Card>
          <p class="details-title"><span>附件:</span>
            <div class="contract-upload-list" v-for="item in uploadList" :key="item.url">
              <div class="contract-upload-list-text">{{item.f_FilePath}}</div>
              <div class="contract-upload-list-cover">
                  <Icon type="ios-cloud-download-outline" @click.native="handleView(item)"></Icon>
              </div>
            </div>
          </p>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import { formatNetTime } from "@/libs/tools";
import i18n from "./locale";

export default {
  name: "yy-knowledgebase-retrieval",
  data() {
    return {
      i18n: i18n,
      currentData: "",
      detailsModal: false,
      uploadList: [],
      type: "list",
      page: {
        total: 0,
        pageSize: 20
      },
      formSearch: {
        searchContent: "",
        dsNum: "",
        searchItems: []
      },
      editFormInLine: {
        supplierNum: "",
        supplierName: "",
        contact: "",
        tel: "",
        remark: ""
      },

      editFormRuleInline: {
        supplierNum: ValidatorRule.require,
        supplierName: ValidatorRule.require,
        tel: ValidatorRule.tel
      },

      columns: [
        {
          title: "知识标题",
          key: "f_KnowleTitle"
        },
        {
          title: "分类",
          key: "dsName"
        },
        {
          title: "摘要 ",
          key: "f_KnowleDigest"
        },
        {
          title: "关键词",
          key: "f_KnowleKeyword"
        },
        {
          title: "附件个数 ",
          key: "knowLedgeFiles",
          render: (h, params) => {
            return h("span", params.row.knowLedgeFiles.length);
          }
        },
        {
          title: "录入时间 ",
          key: "f_KnowleCreateDT"
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.details(params.index);
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ],
      data: [],
      knowledgeClassification: [],
      detailsList: []
    };
  },

  mounted() {
    this.handleSearch();
    this.initClassification();
  },

  computed: {},

  methods: {
    initClassification() {
      let obj = {
        userID: "",
        userName: "",
        b_UserRole: ""
      };
      this.getClassification(obj);
    },

    getClassification(obj) {
      API.getClassification(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.knowledgeClassification = data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    handleSearch() {
      let obj = this.formSearch;
      obj.pageNum = 1;
      obj.pageSize = this.page.pageSize;
      this.formSearch = obj;
      this.getList(obj);
    },

    getList(obj) {
      API.getList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            if (data != null) {
              this.page.total = data.total;
              this.page.pageSize = data.pageSize;
              this.data = data.list;
            } else {
              this.$Message.success({ content: "暂无数据！" });
              this.data = [];
            }
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    changePage(pageNum) {
      let obj = this.formSearch,
        maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.formSearch = obj;
      this.getList(obj);
    },

    goBack() {
      this.type = "list";
    },

    details(index) {
      this.type = "details";
      this.currentData = _.clone(this.data[index]);
      this.uploadList = this.currentData.knowLedgeFiles;
      let obj = {
        knowledgeID: ""
      };
      this.getDetailsList(obj);
    },

    getDetailsList(obj) {
      API.getDetailsList(obj)
        .then(res => {
          if (res.code == 200) {
            let dataDet = res.data;
          }
        })
        .catch(err => {
          console.log(err);
          this.$Message.error("请求异常！");
        });
    },

    edit() {
      this.type = "edit";
    },

    handleView(obj) {
      window.location.href = obj.url;
    }
  }
};
</script>
<style lang="less" >
@import "./yy-knowledgebase-retrieval.less";
</style>
